<template>
	<view :style="{paddingTop: statusBarHeight + 44 + 'px',}">
		<view class="topHead flex-between" :style="{top: statusBarHeight + 'px',}">
			<uni-icons type="back" size="24" @click="goBack"></uni-icons>
			<view class="title">
				兑换充值
			</view>
			<view class="right" @click="onRight">
				兑换记录
			</view>
		</view>
		<view class="main">
			<view class="iptBox flex-between">
				<view class="title">
					交易所
				</view>
				<view class="ipt" @click="dropDownShow = !dropDownShow">
					<view class="iptText">
						{{bourse.label}}
					</view>
					<uni-icons type="bottom" size="15" color="#333"></uni-icons>
				</view>
			</view>

			<view class="iptBox flex-between">
				<view class="title">
					票类
				</view>
				<view class="ipt" @click="dropDownShow2 = !dropDownShow2">
					<view class="iptText">
						{{bourse2.label}}
					</view>
					<uni-icons type="bottom" size="15" color="#333"></uni-icons>
				</view>
			</view>

			<view class="iptBox flex-between">
				<view class="title">
					账号
				</view>
				<view class="ipt flex-row">
					<input placeholder="请输入账号" v-model="form.account" />
				</view>
			</view>


			<view class="iptBox flex-between">
				<view class="title">
					兑换数量
				</view>
				<view class="ipt flex-row">
					<input placeholder="请输入兑换数量" v-model="form.amount" />
				</view>
			</view>


			<view class="iptBox flex-between">
				<view class="title">
					兑换均价
				</view>
				<view class="ipt flex-row">
					<input placeholder="请输入兑换均价" v-model="form.price" />
				</view>
			</view>

			<view class="exchangeNum">
				兑换数量：{{ exchangeNum }}
			</view>

			<view class="uploadBox">
				<view class="uploadText">
					上传图片
				</view>
				<view class="upload">
					<view class="uploadItem">
						<uni-file-picker class="picker" fileMediatype="image" mode="grid" @select="select"
							@delete="pickerDelete" :image-styles="imageStyles">
							<image class="uploadBg" src="http://www.bobei.shop/static/my/uploadBg.png"></image>
						</uni-file-picker>
					</view>
				</view>
			</view>

			<button class="btn" @click="onBtn">兑换</button>
		</view>

		<my-popup-tips type="bottom" :showTips="dropDownShow" @tipsOpen="paywayOpen" @tipsClose="paywayClose">
			<view class="paywayBox">
				<image class="close" src="http://www.bobei.shop/static/my/payway/close.png"
					@click="dropDownShow = false">
				</image>
				<view class="paywayTitle2">
					选择交易所
				</view>

				<view class="way2">
					<view class="wayItem2 flex-between" v-for="item in candidates" :key="item.value"
						@click="onCandidates(item)">
						<view class="wayItemLeft2 flex-row">
							<view class="wayItemLeftCon2">
								<view class="wayItemLeftConText2">
									{{ item.label }}
								</view>
							</view>
						</view>
						<view class="wayItemRight2">
							<image class="choose2" src="http://www.bobei.shop/static/login/choose.png"
								v-if="!item.status">
							</image>
							<image class="choose2" src="http://www.bobei.shop/static/login/choosed.png"
								v-if="item.status">
							</image>
						</view>
					</view>
				</view>
				<button class="paySure2" :plain="true" @click="dropDownShow = false">确定</button>
			</view>
		</my-popup-tips>


		<my-popup-tips type="bottom" :showTips="dropDownShow2" @tipsOpen="paywayOpen2" @tipsClose="paywayClose2">
			<view class="paywayBox">
				<image class="close" src="http://www.bobei.shop/static/my/payway/close.png"
					@click="dropDownShow2 = false">
				</image>
				<view class="paywayTitle2">
					选择票类
				</view>

				<view class="way2">
					<view class="wayItem2 flex-between" v-for="item in candidates2" :key="item.value"
						@click="onCandidates2(item)">
						<view class="wayItemLeft2 flex-row">
							<view class="wayItemLeftCon2">
								<view class="wayItemLeftConText2">
									{{ item.label }}
								</view>

							</view>
						</view>
						<view class="wayItemRight2">
							<image class="choose2" src="http://www.bobei.shop/static/login/choose.png"
								v-if="!item.status">
							</image>
							<image class="choose2" src="http://www.bobei.shop/static/login/choosed.png"
								v-if="item.status">
							</image>
						</view>
					</view>
				</view>

				<button class="paySure2" :plain="true" @click="dropDownShow2 = false">确定</button>
			</view>
		</my-popup-tips>

		<determined-popover :showTips="determinedShow" @tipsOpen="determineTipsOpen" @tipsClose="determineTipsClose"
			@onDeterClose="onDeterClose" @onPrefect="determineOnPrefect" :deterTitle="deterTitle"
			:deterContent="deterContent"></determined-popover>
	</view>
</template>

<script>
	import myPopupTips from "../components/my-popup-tips/my-popup-tips.vue";
	import determinedPopover from "../components/determined-popover/determined-popover.vue";
	export default {
		components: {
			"my-popup-tips": myPopupTips,
			"determined-popover": determinedPopover,
		},
		data() {
			return {
				determinedShow: false,
				deterTitle: "",
				deterContent: "",

				statusBarHeight: "",
				dropDownShow: false,
				candidates: [], // 交易所数组
				bourse: {
					value: "",
					label: "",
				}, // 选中的交易所

				dropDownShow2: false,
				candidates2: [], // 票类数组
				bourse2: {
					value: "",
					label: "",
				}, // 选中的票类

				form: {
					account: "",
					amount: "",
					price: "",
				},
				imageValue: [],
				imageStyles: {
					width: 110,
					height: 110,
					border: {
						color: "transparent",
						width: 0,
						style: 'dashed',
						radius: '0rpx'
					}
				},
				payParams: {},
			}
		},
		onLoad() {
			this.statusBarHeight = this.$mySysInfo().top;
		},
		onShow() {
			this.getParams();
			this.getPayParams();
		},
		computed: {
			exchangeNum() {
				var a = parseInt(Number(this.payParams.rate) * Number(this.form.amount) * (Number(this.form.price) / 100));
				return a;
			},
		},
		methods: {
			onBtn() {
				if (!this.form.account) {
					uni.showToast({
						title: '请输入账号',
						duration: 1500,
						icon: 'none',
					});
					return;
				}
				if (!this.form.amount) {
					uni.showToast({
						title: '请输入兑换数量',
						duration: 1500,
						icon: 'none',
					});
					return;
				}
				if (!this.form.price) {
					uni.showToast({
						title: '请输入兑换均价',
						duration: 1500,
						icon: 'none',
					});
					return;
				}
				if (!this.form.price) {
					uni.showToast({
						title: '请输入兑换均价',
						duration: 1500,
						icon: 'none',
					});
					return;
				}
				if (!this.imageValue.length) {
					uni.showToast({
						title: '请上传图片',
						duration: 1500,
						icon: 'none',
					});
					return;
				}
				this.deterTitle = "提示";
				this.deterContent = "确定兑换？";
				this.determinedShow = true;
			},
			determineTipsOpen(param) {
				this.determinedShow = param;
			},
			determineTipsClose(param) {
				this.determinedShow = param;
			},
			onDeterClose() {
				this.determinedShow = false;
			},
			determineOnPrefect() {
				let that = this;
				let payImg = [];
				that.imageValue.forEach((item) => {
					payImg.push(item.payImg)
				})
				that.$post({
					module: 'Pay',
					interface: 7001,
					data: {
						ration_id: that.bourse.value,
						exchange_id: that.bourse2.value,
						account: that.form.account,
						num: that.form.amount,
						price: that.form.price,
						payImg: payImg

					},
				}).then(res => {
					that.determinedShow = false;
					uni.showToast({
						title: '操作成功',
						duration: 1500,
						icon: 'none',
					});
					setTimeout(() => {
						that.goBack();
					}, 1000)
				})
			},
			onRight() {
				uni.navigateTo({
					url: '/balance/ewRecord?from=兑换充值&type=4'
				})
			},
			goBack() {
				const pages = getCurrentPages()
				if (pages.length === 1) {
					if (typeof params === 'number') {
						history.go(-params)
					} else {
						history.back()
					}
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			},
			paywayOpen(param) {
				this.dropDownShow = param;
			},
			paywayClose(param) {
				this.dropDownShow = param;
			},
			paywayOpen2(param) {
				this.dropDownShow2 = param;
			},
			paywayClose2(param) {
				this.dropDownShow2 = param;
			},
			getPayParams() {
				this.$post({
					module: 'Pay',
					interface: 7000,
				}).then(res => {
					// console.log("充值参数", res)
					this.payParams = res;
				})
			},
			getParams() {
				this.$post({
					module: 'Exchange',
					interface: 5000,
					data: {
						type: 2,
					},
				}).then(res => {
					this.candidates = res;
					this.candidates.forEach((item, index) => {
						if (index == 0) {
							item.status = true;
						} else {
							item.status = false;
						}
					})
					this.bourse = {
						value: res[0].value,
						label: res[0].label
					}
					this.candidates2 = res[0].children;
					this.candidates2.forEach((item, index) => {
						if (index == 0) {
							item.status = true;
						} else {
							item.status = false;
						}
					})
					this.bourse2 = {
						value: res[0].children[0].value,
						label: res[0].children[0].label,
					}
				})


			},
			onCandidates(param) {
				this.candidates.forEach((item, index) => {
					item.status = false;
					if (param.value == item.value) {
						item.status = true;
						this.bourse = {
							value: item.value ? item.value : "",
							label: item.label ? item.label : "",
						}
						this.candidates2 = item.children;
						this.candidates2.forEach((item2, index2) => {
							if (index2 == 0) {
								item2.status = true;
							} else {
								item2.status = false;
							}
						})
						this.bourse2 = {
							value: item.children.length ? item.children[0].value : "",
							label: item.children.length ? item.children[0].label : "",
							price: item.children.length ? item.children[0].price : "",
							exNo: item.children.length ? item.children[0].exNo : "",
						}
						this.dropDownShow = false;
					}
				})
			},
			onCandidates2(param) {
				this.candidates2.forEach((item) => {
					item.status = false;
					if (item.value == param.value) {
						item.status = true;
						this.bourse2 = {
							value: item.value ? item.value : "",
							label: item.label ? item.label : "",
							price: item.price ? item.price : 0,
							exNo: item.exNo ? item.exNo : "",
						}
						this.dropDownShow2 = false;
					}
				})


			},
			// onDropDown(item) {
			//   let param = JSON.parse(item)
			//   this.dropDownShow = false;
			//   this.bourse = {
			//     value: param.value ? param.value : "",
			//     label: param.label ? param.label : "",
			//   }
			//   this.candidates2 = param.children;
			//   this.bourse2 = {
			//     value: param.children.length ? param.children[0].value : "",
			//     label: param.children.length ? param.children[0].label : "",
			//   }
			// },
			// onDropDown2(item) {
			//   let param = JSON.parse(item);
			//   this.dropDownShow2 = false;
			//   this.bourse2 = {
			//     value: param.value ? param.value : "",
			//     label: param.label ? param.label : "",
			//   }
			// },
			// 获取上传状态
			select(e) {
				// // console.log('选择文件：', e);
				this.$upload({
					data: {
						filePath: e.tempFilePaths[0]
					}
				}).then((res) => {
					let obj = {
						payImg: res.file,
						tempFilePath: e.tempFilePaths[0],
					}
					this.imageValue.push(obj);
					// console.log("imageValue:", this.imageValue);
				}).catch((error) => {
					// console.log("上传error：", res);
				})
			},
			// 文件从列表移除时触发
			pickerDelete(e) {
				// // console.log('文件从列表移除时触发：', e);
				this.imageValue.forEach((item, index) => {
					if (item.tempFilePath === e.tempFilePath) {
						this.imageValue.splice(index, 1);
					}
				})
			},


		},
	}
</script>

<style scoped lang="scss">
	.topHead {
		background-color: #ffffff;
		height: 88rpx;
		width: 100%;
		padding: 0 32rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 3;

		.title {
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			position: absolute;
			top: 22rpx;
			left: 50%;
			transform: translate(-50%, 0);
		}

		.right {
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #F2615F;
		}
	}

	.main {
		padding: 0 32rpx;

		.iptBox {
			margin-bottom: 28rpx;

			.title {
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 44rpx;
			}

			.ipt {
				width: 70%;
				height: 80rpx;
				background: #f9f9f9;
				border-radius: 16rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 20rpx;
				position: relative;

				.iptText {
					color: #333;
					font-size: 28rpx;
				}

				input {
					padding-left: 16rpx;
					font-size: 28rpx;
				}

				/deep/uni-input {
					padding-left: 0;
				}

				.topLDropDown {
					position: absolute;
					right: 0;
					top: 86rpx;
					z-index: 10;
				}
			}
		}

		.exchangeNum {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #000000;
			line-height: 40rpx;
			text-align: right;
		}

		.uploadBox {
			display: flex;
			margin-top: 20rpx;
			display: flex;
			flex-wrap: wrap;

			.uploadText {
				font-size: 32rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			.upload {
				flex: 1;
				height: auto;
				padding-left: 80rpx;



				.uploadItem {
					// width: 210rpx;
					height: 210rpx;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;

					.uploadBg {
						width: 210rpx;
						height: 210rpx;
					}
				}
			}
		}

		.btn {
			font-size: 36rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #ffffff;
			line-height: 50rpx;
			width: 606rpx;
			height: 104rpx;
			background: #F2615F;
			border-radius: 52rpx;
			padding: 0;
			margin: 324rpx auto 0;
		}
	}

	.paywayBox {
		width: 100%;
		background-color: #ffffff;
		border-radius: 16rpx 16rpx 0 0;
		padding-top: 44rpx;
		position: relative;
		padding-bottom: 41rpx;

		.close {
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			top: 18rpx;
			right: 20rpx;
			z-index: 1;
		}

		.paywayTitle2 {
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 50rpx;
			text-align: center;
		}

		.way2 {
			margin-top: 40rpx;

			.wayItem2 {
				padding: 0 39rpx 0 40rpx;
				height: 110rpx;
				border-top: 2rpx solid #F5F5F5;

				.wayItemLeft2 {

					.wayItemLeftCon2 {
						margin-left: 20rpx;

						.wayItemLeftConText2 {
							font-size: 30rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
							line-height: 42rpx;
						}

						.wayItemLeftConCard2 {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
							line-height: 42rpx;
						}
					}
				}

				.wayItemRight2 {
					.choose2 {
						width: 40rpx;
						height: 40rpx;
					}

					.add2 {
						.addText2 {
							font-size: 26rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							line-height: 37rpx;
						}

						.arrowRight2 {
							width: 32rpx;
							height: 32rpx;
						}
					}
				}
			}

			.wayItem2:nth-last-of-type(1) {
				border-bottom: 2rpx solid #F5F5F5;
			}

		}

		.paySure2 {
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 45rpx;
			width: 610rpx;
			height: 88rpx;
			background: #F2615F;
			border-radius: 16rpx;
			margin: 40rpx auto 0;
			padding: 0;
			border: none;
		}
	}
</style>
